<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>设置支付密码</title>
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../js/mui-keyboard/ydui.css">
    <link rel="stylesheet" href="../../js/mui-keyboard/demo.css">
    <style>
        .demo-tip p{
            padding:4px 0;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"><!--设置支付密码--></h1>
</header>
<div class="mui-content">
    <section class="g-flexview">

       <!-- <header class="m-navbar">
            <a href="../index.html" class="navbar-item"><i class="back-ico"></i></a>
            <div class="navbar-center"><span class="navbar-title">KeyBoard</span></div>
        </header>-->

        <section class="g-scrollview">

            <aside class="demo-tip">
                <p><b>请设置支付密码，用于支付验证</b></p>
                <p>1.点击打开开启键盘</p>
                <p>2.两次的密码要一致</p>
            </aside>

            <div class="m-button demo-pitch">
                <a href="javascript:;" class="btn-block btn-primary" id="J_OpenKeyBoard">打开</a>
            </div>

            <div class="m-keyboard" id="J_KeyBoard">
                <!-- 自定义内容区域 -->
                <div style="text-align: right;padding: .15rem .8rem 0;"><a href="http://www.ydui.org" style="color: #666;font-size: .24rem;">忘记密码</a></div>
                <!-- 自定义内容区域 -->
            </div>

        </section>

    </section>

</div>

<script src="../../js/mui-keyboard/jquery.min.js"></script>
<script src="../../js/mui-keyboard/ydui.js"></script>
<script src="../../js/mui-keyboard/ydui.flexible.js"></script>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script>
    var firstpwd = "";
    var secondpwd= "";
    var firstfalg = true;

    !function ($, ydui) {

        var dialog = ydui.dialog;
        var $keyboard = $('#J_KeyBoard');

        // 初始化参数
        $keyboard.keyBoard({
            disorder: false, // 是否打乱数字顺序
            title: 'X联盟安全键盘' // 显示标题
        });

        // 打开键盘
        $('#J_OpenKeyBoard').on('click', function () {
            $keyboard.keyBoard('open');
        });

        // 六位密码输入完毕后执行
        $keyboard.on('done.ydui.keyboard', function (ret) {
            console.log('输入的密码是：' + ret.password);
            // 第一次设置密码
            if(firstfalg){
                firstpwd  = ret.password;
                firstfalg = false;
                // 关闭键盘
                $keyboard.keyBoard('close');
                setTimeout(()=>{
                    $keyboard.keyBoard('open');
                },600)
                return;
            }else{
                secondpwd  = ret.password;
            }
            // 第二次设置密码
            if(firstpwd != secondpwd){
                // 显示错误信息
                $keyboard.keyBoard('error', '密码和上一次不一致，请再次输入');
                return;
            }
            // 弹出请求中提示框
            dialog.loading.open('设置中，请稍候...');

            // 模拟AJAX校验密码
            setTimeout(function () {
                // 关闭请求中提示框
                dialog.loading.close();

                // 显示错误信息
                $keyboard.keyBoard('error', '设置失败');
            }, 1500);

            // 关闭键盘
            // $keyboard.keyBoard('close');
        });

    }(jQuery, YDUI);
</script>
</body>
</html>